<template>
	<view>
		<view class="Order-list">

			<view class="Order-list-td">
				<table>
					<tr>
						<td class="td" @click="order_css" :style="{'color':colorAll,'border-bottom':borderAll}">所有</td>
						<td @click="order_css" :style="{'color':colorObli,'border-bottom':borderObli}">待付款</td>
						<td @click="order_css" :style="{'color':colorPrg,'border-bottom':borderPrg}">处理中</td>
						<td @click="order_css" :style="{'color':colorPaid,'border-bottom':borderPaid}">已付款</td>
						<td @click="order_css" :style="{'color':colorCancel,'border-bottom':borderCancel}">已取消</td>
					</tr>
				</table>
			</view>


		</view>
		<view class="Order-list-li" style="padding-top: 136rpx;">
			<view class="Order-list-span" v-for="(o,i) in orderInfo">
				<view class="span-top">
					<view>
						{{o.villa_name}}
					</view>
					<view class="span-price">
						<view class="price">
							￥{{o.pay_price}}
						</view>
						<view class="state">
							{{o.order_state}}
						</view>
					</view>
				</view>
				<view class="span-bottom">
					<view class="bottom-text">
						订单号：SL{{o.order_no}}
					</view>
					<view class="bottom-text">
						创建人：{{o.occupant}}
					</view>
					<view class="bottom-text">
						下单时间：{{o.create_time}}
					</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	import api from '@/static/js/api.js'
	export default {
		data() {
			return {
				orderInfo: [],
				colorAll:"",
				borderAll:"",
				colorObli:"",
				borderObli:"",
				colorPrg:"",
				borderPrg:"",
				colorPaid:"",
				borderPaid:"",
				borderCancel:"",
				colorCancel:"",
			}
		},
		onLoad() {
			this.OrderInfo();
		},
		methods: {
			order_all(){
				this.colorAll="#ff8600";
			},
			OrderInfo() {
				wx.request({
					url: api.api + '/Order/selectOrder', // 仅为示例，并非真实的接口地址
					method: 'get',
					data: {
						pageNum:1,
						pageSize: 50,
						user_id:1,
					},
					header: {
						// 'openid': this.userinfo.openid // 默认值
					},
					success: (res) => {
						uni.showLoading({
							title: '数据加载中'
						});
						setTimeout(() => {
							uni.hideLoading()
							this.orderInfo = res.data.data.list
							console.log(this.orderInfo);
						}, 800);
					}
				})
			}
		}
	}
</script>

<style>
	@import url(../../static/css/order.css);
</style>
